<!--
 * @Description: 邀请好友规则预览弹窗
 * @Author: Li Yujie
 * @Date: 2021/07/21
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/07/21
-->
<template>
    <section class="wrapper">
        <el-dialog
            :visible.sync="dialogVisible"
            :show-close="false"
            width="375px"
            :close-on-click-modal="false"
        >
            <div
                class="close-btn"
                @click="dialogVisible = false"
            >
                <i class="el-icon-circle-close"/>
            </div>
            <div class="dialog-content">
                <page-header
                    left-icon="el-icon-hand-close"
                    right-icon="el-icon-hand-gengduo"
                    style="flex-shrink: 0"
                    class="page-header"
                />
                <div class="content-wrapper">
                    <img
                        src="https://cdn.zsdx.cn/phaadmin/share-bg1.png"
                        alt=""
                        class="bg-image"
                    >
                    <img
                        src="https://cdn.zsdx.cn/phaadmin/share-bg4.png"
                        alt=""
                        class="bg-image"
                    >
                    <img
                        src="https://cdn.zsdx.cn/phaadmin/share-bg3.png"
                        alt=""
                        class="bg-image"
                    >
                    <div
                        class="swiper-container"
                        v-if="dialogVisible"
                    >
                        <div class="swiper-wrapper">
                            <div
                                class="swiper-slide"
                                v-for="(item,index) in previewData"
                                :key="index"
                                :style="{
                                    background: `url(${item}) center no-repeat`,
                                    backgroundSize: 'cover'
                                }"
                            />
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"/>
                    </div>
                </div>
                <div class="download-button">点击下载</div>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import PageHeader from "@/components/invite-friends/page-header";
import Swiper from "swiper";
import 'swiper/css/swiper.min.css';

export default {
    name: 'InvitedPosterPreview',
    data() {
        return {
            dialogVisible: false,
            previewData: [],
        };
    },
    components: {PageHeader},
    mounted() {},
    methods: {

        /**
         * 展示弹窗
         * @param data
         */
        show(data) {
            this.dialogVisible = true;
            this.previewData = data;
            if(data.length) {
                this.$nextTick(() => {
                    this.initSwiper();
                });
            }
        },

        /**
         * 初始化轮播
         */
        initSwiper() {
            this.swiper = new Swiper('.swiper-container', {
                slidesPerView: 'auto',
                spaceBetween: 8,
                centeredSlides: true,
                loop: true,
                autoplay: true,
                pagination: {
                    el: '.swiper-pagination',
                },
                coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 300,
                    modifier: 1,
                    slideShadows: false,
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    /deep/ .page-header {
        .nav-bar {
            padding: 0 14px;
            .iconfont {
                width: auto;
            }
        }
    }
    /deep/ .el-dialog {
        width: 375px;
        height: 667px;
        background: #F5F6F8;
        box-shadow: 0 0 20px 0 rgba(153, 169, 192, 0.2);
        position: relative;

        .close-btn {
            position: absolute;
            right: -20px;
            top: -20px;
            cursor: pointer;
            font-size: 20px;
            color: #fff;
        }

        .el-dialog__header {
            display: none;
        }

        .el-dialog__body {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            padding: 0;

            .dialog-content {
                height: 100%;
                display: flex;
                flex-direction: column;
                position: relative;
                .content-wrapper {
                    overflow-y: auto;
                    flex: 1;
                    background: #D0EBFF;
                    position: relative;
                    padding-bottom: 64px;
                    .bg-image {
                        width: 100%;
                        object-fit: cover;
                        &:nth-child(2), &:nth-child(3) {
                            margin: 15px 15px 20px;
                            width: calc(100% - 30px);
                        }
                    }
                    &::-webkit-scrollbar {
                        width: 0;
                        height: 0;
                    }
                    .swiper-container {
                        width: 345px;
                        height: 180px;
                        left: 50%;
                        transform: translateX(-50%);
                        top: 475px;
                        position: absolute;
                    }
                    .swiper-slide {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        -webkit-justify-content: center;
                        justify-content: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        -webkit-align-items: center;
                        align-items: center;
                        transition: 300ms;
                        transform: scale(0.9);
                        width: 204px;
                        height: 153px;
                        border-radius: 8px;
                    }
                    .swiper-slide-active,.swiper-slide-duplicate-active{
                        transform: scale(1);
                    }
                    .swiper-pagination {
                        bottom: 0;
                        .swiper-pagination-bullet {
                            width: 6px;
                            height: 6px;
                        }
                        .swiper-pagination-bullet-active {
                            background: #20A0FF;
                        }
                    }
                }
                .download-button {
                    width: 345px;
                    height: 44px;
                    background: #20A0FF;
                    box-shadow: 0 4px 14px 0 rgba(32, 160, 255, 0.5);
                    border-radius: 22px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #FFFFFF;
                    position: absolute;
                    bottom: 20px;
                    left: 50%;
                    transform: translateX(-50%);
                    cursor: pointer;
                    z-index: 1;
                }
            }

        }
    }

}
</style>
